<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-color: bisque;
            }
            div {
                background-image: url(https://img1.baidu.com/it/u=390144124,1429187274&fm=253&fmt=auto&app=138&f=JPEG?w=807&h=500);
                width: 1000px;
                height: 500px;
                /* background-repeat: no-repeat; */
                /* background-repeat: repeat; */
                /* background-repeat: repeat-x; */
                /* background-repeat: repeat-y; */

                /* background-position: top; */
                /* background-position: left; */
                /* background-position: right; */
                /* background-position: bottom; */
                /* background-position: 100px 100px; */
                /* background-position: 100px center; */

                /* background-size: 100px 100px; */
                /* background-size: 80% 50%; */
                /* background-size: cover; */
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <!-- 背景属性 -->
        <div>我正在学习背景知识</div>
        <!-- 背景颜色--background-color,设置背景颜色 -->

        <!-- 背景图片--background-image,设置背景图片 -->

        <!-- 背景平铺--background-repeat,repeat--平铺，no-repeat--不平铺，repeat-x--x轴平铺，repeat-y--y轴平铺 -->

        <!-- 背景位置--background-position -->
        <!-- 方位名词--top buttom left right -->
        <!-- 精确单位--坐标--x y -->
        <!-- 混合单位--方位名词+精确单位 -->

        <!-- 背景尺寸--background-size -->
        <!-- 按照固定像素--x y,单位px -->
        <!-- 固定屏幕百分比--n% n% -->
        <!-- 完全覆盖尺寸--cover -->
        <!-- 完整显示图片--contain -->
    </body>
</html>